<template>
<div>
    <!-- 1.单元素过渡效果实现 -->
    <button @click="isShow = !isShow">显示/隐藏</button>
    <!-- 想让一刷新就开始动画效果，添加appear为true，前面不加:会被解析成字符串"true"，控制台报错，可以直接简写appear -->
    <!-- <transition name="hello" :appear="true">
        <h1 v-show="isShow">你好啊！</h1>
    </transition> -->

    <!-- 2.多个元素使用同一个过渡效果，使用transition-group，同时指定key -->
    <transition-group name="hello" :appear="true">
        <h1 v-show="isShow" key="1">你好啊！</h1>
        <h1 v-show="isShow" key="2">TOM！</h1>
    </transition-group>
</div>
</template>

<script>

export default {
    name:'VueTest2',
    data() {
        return {
            isShow:true
        };
    }
}
</script>
<style scoped>
    h1{
        background-color: orange;
        /* 给谁添加动画效果就给谁的样式添加过渡 */
        /* transition: 1s linear;   过渡效果也可以单独写*/
    }

    /* 进入、离开过程中的效果 */
    .hello-enter-active,.hello-leave-active{
        transition: 1s linear;  
    }

    /* 进入的起点样式 */
    /* .hello-enter{
        transform: translateX(-100%);
    } */
    /* 进入的终点样式 */
    /* .hello-enter-to{
        transform: translateX(0);
    } */
     /* 离开的起点样式 */
    /* .hello-leave{
        transform: translateX(0);
    } */
    /* 离开的终点样式 */
    /* .hello-leave-to{
        transform: translateX(-100%);
    }  */

     /* 进入的起点就是离开的终点，进入的终点就是离开的起点，可以写一块 */
    /* 进入的起点，离开的终点 */
    .hello-enter,.hello-leave-to{
        transform: translateX(-100%);
    }
    /* 进入的终点，离开的起点 */
    .hello-enter-to,.hello-leave{
        transform: translateX(0);
    }
</style>